<script setup>
import { ref } from 'vue'
import MyIcon from '@/components/my-icon/index.vue'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import corpTable from './component/corpTable.vue'
import createCorp from './component/createCorp.vue'
import corpImport from './component/corpImport.vue'
const activeKey = ref(1)
const showTest=ref()
const isSwitch = ref(false)
const corpVisible = ref(false)
const corpImportVisible = ref(false)
const showdata = ref()
const corpTableRef = ref(null)
const freshTabs = ref(true)
const changeCorpVisible = (visible) => {
	showdata.value.show(111)
	corpVisible.value = visible
	
	if (!visible){
		freshTabs.value  = false
		setTimeout(()=>{
			freshTabs.value = true
		},1000)
	}
}
const tableapiedit =(val)=>{
	showdata.value.show(111)
	corpVisible.value = true
	corpFrom.value=val
	console.log(val)
}
const changecorpImportVisible = (visible) => {
	corpImportVisible.value = visible
}

const openCorpImportModel = () => {
	corpImportVisible.value = true
}
const corpFrom = ref({
	grouping_id:"",

	group: [],
	title: '',
	welcome_data: [
		{
			type: 1,
			value: '',
			path: '',
			imgName: '',
			imgPath: '',
			url: ''
		}
	],
	inform: false
})
const openCorpModel = () => {
	showdata.value.show(111)
	corpVisible.value = true
}
const handleClick = (tab, event) => {
	console.log(tab, event)
}
const from = ref({
	sort: '',
	// department: '全部部门',
	content: ''
})
const departmentList = [
	{
		value: 8161729,
		label: '东风文化传媒有限公司',
		order: '100000000',
		children: []
	}
]
const changSwitch = (val) => {
	console.log(val)
	if (val) {
		ElMessage({
			message: '侧边栏已经开启',
			type: 'success'
		})
	} else {
		ElMessage({
			message: '侧边栏已经关闭',
			type: 'success'
		})
	}
}
const activeKeyList = [
	{
		id: 1,
		title: '企业话术'
	},
	// {
	// 	id: 2,
	// 	title: '团队话术'
	// },
	// {
	// 	id: 3,
	// 	title: '个人话术'
	// }
]
const sortdata=(val)=>{
	// console.log(tabledatashow.value)
	
}
</script>
<template>
	<div class="container">
		<el-tabs v-if="freshTabs" v-model="activeKey" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane v-for="item in activeKeyList" :key="item.id"  :name="item.id" >
				<div class="tab-box">
					<div v-show="activeKey === 1" class="page-header-bar">
						<div class="btn-group">
							<el-space wrap :size="15">
								<el-button @click="openCorpModel" class="btn-primary" type="primary">新建话术</el-button>
								<!-- <el-button @click="openCorpImportModel" class="btn-default">导入话术</el-button> -->

								<!-- <el-space class="switch-box" wrap :size="5">
									侧边栏开关
									<el-tooltip content="员工可在企业微信客户端侧边栏-快捷回复使用企业话术" placement="top" effect="light"
										><MyIcon class="question-icon" name="Question"
									/></el-tooltip>
									：
									<el-switch v-model="isSwitch" @change="changSwitch" />
								</el-space> -->
							</el-space>
						</div>
						<!-- <div class="input-group">
							<el-space wrap :size="15">
								<div>
									<span class="font-a6">发送次数排序：</span>
									<el-select v-model="from.sort" placeholder="请选择排序方式" @change="sortdata()">
										<el-option label="升序" value="ASC" />
										<el-option label="降序" value="DESC" />
									</el-select>
								</div> -->
								<!-- <div>
									<span class="font-a6">可用部门：</span>
									<el-tree-select v-model="from.department" :data="departmentList"></el-tree-select>
								</div> -->
								<!-- <el-input v-model="from.content" placeholder="请输入话术内容" :suffix-icon="Search" @keyup.enter.native="sortdata()" />
							</el-space>
						</div> -->
					</div>
					<corpTable ref="corpTableRef" :activeKey="activeKey" :from="from" @tableapiedit="tableapiedit" style="margin-top: 15px;"></corpTable>
				</div>
			</el-tab-pane>
		</el-tabs>
		<createCorp ref="showdata" :corpVisible="corpVisible" :corpFrom="corpFrom" @changeCorpVisible="changeCorpVisible" />
		<corpImport :corpImportVisible="corpImportVisible" @changecorpImportVisible="changecorpImportVisible" />
	</div>
</template>
<style lang="scss" scoped>
.question-icon {
	cursor: pointer;
}
.font-a6 {
	color: #000000a6;
	font-size: 14px;
}
.container {
	padding: 16px;
	height: calc(100vh - 144px);
	padding-bottom: 30px;
	:deep(.el-tabs__nav-wrap) {
		background-color: #fff;
		padding-left: 10px;
	}
	.demo-tabs {
		width: 100%;
		height: 100%;
		:deep(.el-tabs__content) {
			height: 100%;
			overflow: inherit;
		}
		:deep(.el-tab-pane) {
			height: 100%;
		}
		.tab-box {
			height: 100%;
		}
		.page-header-bar {
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			-webkit-box-pack: justify;
			justify-content: space-between;
			margin-bottom: 20px;
			.btn-group {
				display: flex;
				align-items: center;
				.switch-box {
					color: #000000a6;
					font-size: 14px;
				}
				.btn-default {
					border: 1px solid #178af5;
					color: #178af5;
					padding: 16px;
					border-radius: 2px;
				}
				.btn-primary {
					padding: 16px;
					border-radius: 2px;
					margin-bottom: 15px;
				}
			}
		}
	}
}
</style>
